<template>
  <div>
    <div id="int">
      <p><span id="usernamems"></span> <input type="text" id="username" v-model="username" placeholder="账号"/><span></span></p>
      <p><span id="userpassms"></span> <input type="text"    id="userpass" v-model="userpass" placeholder="密码"/><span></span> </p>
    </div>
    <button @click="fun()">登录</button>
    <router-link to="/Zhuce">还没有账号？赶紧注册一个吧</router-link>
  </div>
</template>

<script>
// import {getlink} from 'a/getlink.js'
export default {
  data() {
    return {
      username: "",
      userpass: "",
    };
  },
  methods: {
    prev() {
      this.$router.push("/Denglu");
    },
    fun() {
      this.$router.push("/Setup"); //放在验正成功内

      localStorage.setItem("token", this.username);
      //点击传给后端所需要的username用户名字
      console.log(this.username);
      console.log(this.userpass);
    },
  },
};
</script>

<style scoped>
a {
  margin-top: 0.2rem;
  font-size: 0.2rem;
  display: block;
  color: gray;
  text-align: center;
}
#int p{
  background-color:ghostwhite;
  margin: auto;
  margin-top: 0.5rem;
  height: 0.8rem;
  width: 90%;
  display: flex;
  justify-content: space-between;
  border-radius: 0.2rem;


}
 
button,input{
  color: gray;
  display: block;
  margin: auto;
  height: 0.5rem;
  width: 2.8rem;
  margin-top: 1rem;
 /* border-radius: 0.3rem; */
 /* background-color:gainsboro; */
 font-size: 0.2rem;
  border-radius: 0.2rem;

}
input {
  width: 13rem;
  margin-top:0.2rem;
  background-color:ghostwhite;
  box-sizing: border-box;
  outline: none;
 

}
#usernamems ,#userpassms{
  /* padding-top: 3rem; */
  display: block;
  width: 1.5rem;
  height: 1rem;
  text-align: right;
  /* border: 1px solid black; */
  background: url(../../../public/my/username.png) no-repeat;
  background-size: 0.3rem;
  background-position: 11% 40%;
}
#userpassms {
  background: url(../../../public/my/userpass.png) no-repeat;
  background-size: 0.3rem;
  background-position: 11% 40%;
}
</style>
